<template>
    <div class="red-image">

        <!--S图片列表-->
        <cube-slide
                id="red-image"
                ref="redImage"
                :initialIndex="slide_index"
                :data="data"
                :loop="loop"
                :showDots="false"
                :interval="changeTimer"
                :autoPlay="play"
        >
        </cube-slide>
        <!--S图片列表-->

        <!--S阻止用户自行滑动-->
        <div id="disabled-slide" v-if="under !== 'success'"></div>
        <!--E阻止用户自行滑动-->

        <!--S红包开启封面-->
        <open-cover
                v-if="under !== 'success'"
                type="image"
                :red="red"
                :red_id="red_id"
                :under="under"
                :image-number="red.images.length"
                @changeUnder="changeUnder"
                @reset="$refs.redImage.refresh()"
                >
        </open-cover>
        <!--E红包开启封面-->

        <!--S红包开启成功显示-->
        <open-success
                :is_show="open_success"
                :red="red"
                @close="openSuccessShow = false"
        >
        </open-success>
        <!--E红包开启成功显示-->

        <!--S控制-->
        <control
                :show_reward="under === 'success'"
                :red="red"
                @showReward="openSuccessShow = true"
        >
        </control>
        <!--E控制-->

        <!--S推广链接-->
        <expand
                v-if="red.link.link"
                :link="red.link.link">
            {{red.link.name}}
        </expand>
        <!--E推广链接-->
    </div>
</template>

<script>
import OpenCover from "../../components/open-cover"
import Config from "@/config"
import OpenSuccess from "../../components/open-success"
import Control from "../../components/control"
import Expand from "../../components/expand"
export default {
    name: "red-image",
    data() {
        return {
            // 开红包状态 not=未开 opening=开启中 remoting=服务器远程请求中 success=开启结束并且成功 error=开启结束并且开启出错
            under: "not",
            // 幻灯切换秒数
            changeTimer: Config.imageRedChangeTime * 1000,
            // 成功奖励区域显示状态
            openSuccessShow: true,
            // 图片索引
            slide_index: 0
        }
    },
    props: {
      // 红包数据
      red: {
          type: Object,
          default () {
              return {}
          }
      },
      // 当前切换的红包id
      changeRedId: {
          default: 0
      }
    },
    computed: {
      // 红包图片
      data () {
        let data = []
        this.red.images.forEach((item) => {
            data.push({image: item})
        })
        return data
      },
      // 红包id
      red_id() {
          return this.red.id
      },
      // 轮播图是否自动播放
      play() {
          if(this.under === 'success' || this.under === 'opening'){
              return true
          } else {
              return false
          }
      },
      // 轮播图是否循环
      loop() {
          if(this.under === 'success'){
              return true
          } else {
              return false
          }
      },
      // 成功区域是否显示
      open_success() {
          if(this.under === 'success' && this.openSuccessShow){
              return true
          } else {
              return false
          }
      }
    },
    components: {
        OpenCover,
        OpenSuccess,
        Control,
        Expand
    },
    activated() {
        this.slide_index = 0
        this.$refs.redImage.refresh()
    },
    mounted() {
        this.under = this.red.under
        if(this.under === 'success') {
            this.openSuccessShow = false
        }
    },
    watch: {
        // 切换的红包id
        changeRedId(value) {
            if(value === this.red_id){
                console.log('是')
            } else {
                if(this.under === 'opening'){
                    this.under = 'not'
                }
            }
        },
        "$route"(to) {
            if(to.name === 'home-send') {
                this.under = 'not'
            }
        }
    },
    deactivated () {
        if(this.under === 'opening'){
            this.under = 'not'
        }
    },
    methods: {
        // 开包状态更改
        changeUnder (under) {
            this.under = under
        }
    }
}
</script>

<style scoped lang="less" src="./red-image.less"></style>

<style lang="stylus">
    #red-image
        z-index 1
    #red-image .cube-slide-item img
        width 100%
        height 100%
        object-fit contain
</style>
